<template>
  <div class="buttonAddWrap">
    <el-dialog class="do-dialog" @opened="$store.commit('dialogTop')" title="详情" :visible.sync="visible" @close="dialogClose()">
      <el-form :model="model" :rules="rules" ref="iForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="案件编号：">{{model.punishNo}}</el-form-item>
        <el-form-item label="罚单部门：">{{model.agencyName?model.agencyName:"超级管理员"}}</el-form-item>
        <el-form-item label="用户名称：">{{model.userName}}</el-form-item>
        <el-form-item label="执法时间：">{{model.punishTime}}</el-form-item>
        <el-form-item label="案件地址：">{{model.punishAddress}}</el-form-item>
        <el-form-item label="处罚原因：">{{model.punishReason}}</el-form-item>
        <el-form-item label="上传图片：">
          <div class="image-list">
            <div class="item" v-for="(item, index) in model.images" :key="index" @click="handlePreview(item)">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="处罚方式：">{{model.punishWay==0?"警告":model.punishWay==1?"罚款":""}}</el-form-item>
        <el-form-item label="处罚金额：">{{model.punishMoney/100}}</el-form-item>
        <el-form-item label="行政处罚通知书：">
          <div class="image-list">
            <div class="item" v-for="(item, index) in model.notices" :key="index"@click="handlePreview(item)">
              <img :src="item.url" alt="" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="案件状态：">{{model.punishState==1?"未送达":model.punishState==2?"已送达":model.punishState==3?"已销号":""}}</el-form-item>
        <el-form-item label="备注：">{{model.remark}}</el-form-item>
        <el-form-item label="创建人员：">{{model.createName}}</el-form-item>
        <el-form-item label="创建时间：">{{model.createTime}}</el-form-item>    
      </el-form>
    </el-dialog>
    <el-dialog class="image-preview" :visible.sync="visibleImage">
      <img width="100%" :src="imageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props:[],
    data () {
      return {
        visible: false,        
        visibleImage: false,
        imageUrl: '',
        model: {},
        rules: {},
      }
    },
    components: {},
    methods: {
      init(id){
        this.axios.post(process.env.API_HOST + `/punish/selectPunishDetail`, {id:id}).then(response => {
          const result = response.data
          if(result.code==200){
            this.model   = result.result
            this.visible = true
          }
        })
      },
      dialogClose(){
        this.visible = false
      },
      // 预览
      handlePreview(file){
        this.imageUrl     = file.url;
        this.visibleImage = true;
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .buttonAddWrap
    display inline-block
    margin-left 10px
</style>